import React from "react";
import { View, Text, StyleSheet, ScrollView } from "react-native";
import { colors } from "../Style/Colors";
import Header from "../Components/Header";
import NoDataFound from "../Components/NoDataFound";
import { setDate } from "../Components/SetDate";

export const EmrDetails = props => {
  const { navigation } = props;
  const fromDate = navigation.getParam("fromDate");
  const toDate = navigation.getParam("toDate");
  const data = navigation.getParam("data");
  return (
    <View style={styles.container}>
      <Header text="EMR" isBack={true} />
      <ScrollView
        showsVerticalScrollIndicator={false}
        style={styles.reportWrapper}
      >
        <View style={styles.titleWrapper}>
          <Text style={styles.header}>
            EMR Details : From {fromDate} To {toDate}
          </Text>
        </View>
        {data.length > 0 ? (
          data.map((data, i) => (
            <React.Fragment key={data.PV_ID}>
              <View style={styles.listWrapper}>
                <View style={styles.list}>
                  <View
                    style={{
                      flexDirection: "row",
                      justifyContent: "space-between",
                      marginBottom: 6
                    }}
                  >
                    <Text style={styles.title}>{data.DISCRIPTION}</Text>
                    <Text style={styles.subtitle}>{data.V_VALUE}</Text>
                  </View>

                  <Text style={styles.subtitle}>
                    {setDate(data.ADD_DATETIME)}
                  </Text>
                </View>
              </View>
            </React.Fragment>
          ))
        ) : (
          <NoDataFound />
        )}
      </ScrollView>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  list: {
    backgroundColor: "#fff",
    padding: 10
  },
  listWrapper: {
    backgroundColor: colors.lightGrey,
    paddingVertical: 0.4,
    borderWidth: 0.3,
    borderColor: colors.lightGrey
  },
  title: {
    fontSize: 14,
    color: "#333"
  },
  subtitle: {
    fontSize: 14
  },
  titleWrapper: {
    backgroundColor: colors.primaryColor,
    padding: 10
  },
  header: {
    color: colors.whiteColor,
    fontWeight: "bold",
    letterSpacing: 0.8,
    fontSize: 16
  },
  reportWrapper: {
    marginVertical: 20,
    elevation: 1,
    marginHorizontal: 10
  }
});

export default EmrDetails;
